<template> 

  <el-dialog :title="info.isAdd ? '管理员添加' : '管理员编辑'" :visible.sync="info.isshow" @closed="closed">

    <el-form :model="user">

      <el-form-item label="所属角色" label-width="120px">
        <el-select v-model="user.roleid" placeholder="请选择所属角色">
          <!-- 3.遍历角色列表 -->
          <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.rolename"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用户名称" label-width="120px">
        <el-input v-model="user.username" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="密码" label-width="120px">
        <el-input v-model="user.password" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="user.status"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" v-if="info.isAdd" @click="add">添 加</el-button>
      <el-button type="primary" v-else @click="update">修 改</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { requseradd, requseredit, requserinfo,reqrolelist } from "../../../https/api";
import { successAlert } from "../../../utils/alert";
export default { 
  props: ["list","info"],
  data() {
    return {
      user:{
            roleid:"",
            username:"",
            password:"",
            status:2,
      },
      roleList:[],
    };
  },
  computed: {
    ...mapGetters({
       userInfo:"userInfo"
    })
  },
  methods: {
    ...mapActions({
      changeUserInfo:"changeUserInfo"
    }),
    // 取消按钮
    cancel(){
        this.info.isshow = false;
    },
    // 清空user
    empty(){
        this.user ={
             roleid:"",
             username:"",
             password:"",
             status:2
        };
    },
    // 添加按钮
    add(){
        requseradd(this.user).then( (res) =>{
          // console.log(res);
            if( res.data.code === 200 ){
                successAlert(res.data.msg);
                // 清空user数据
                this.empty();
                // 弹框消失
                this.info.isshow  = false;
                // 刷新列表  添加成功后通知父组件刷新列表
                this.$emit("init")
            }
        });
    },
    //修改pid
    changePid(){
    // 如果pid是0 type=1 否则type = 2 
        if(this.user.pid == 0){
            this.user.type = 1
        }else{
            this.user.type = 2
        }
    },
    // 获取一条的数据
    getOne(uid){
        requserinfo( {uid:uid} ).then(res=>{
          // console.log(1);
            if(res.data.code==200){
                this.user = res.data.list
                this.user.password = "";
            }
        })
    },
    // 修改
    update(){
        requseredit(this.user).then(res=>{
          // console.log(res);
            if(res.data.code == 200){
                successAlert(res.data.msg);
                if(this.user.uid === this.userInfo.uid){
                  this.changeUserInfo({});
                  this.$router.replace("/login");
                  return;
                }
                // 清空user的数据
                this.empty();
                // 弹框消失
                this.info.isshow = false;
                // 刷新列表
                this.$emit("init")
            }
        })
    },
    closed(){
        //如果是编辑的关闭，就要执行empty
        if(!this.info.isAdd){
            this.empty()
        }
    }
  },
  mounted() {
    reqrolelist().then( res =>{
        console.log(res);
        if(res.data.code == 200){
          this.roleList = res.data.list;
        }
    })
  },
};
</script>
<style lang="less" scoped>
@import "../../../less/index.less";
</style>